<template>
	<view class="chat-container">
		<!-- 搜索栏 -->
	<!-- 	<view class="search-bar">
			<uni-icons type="search" size="20" color="#999"></uni-icons>
			<input class="search-input" placeholder="搜索聊天" placeholder-style="color:#999;" />
		</view> -->

		<!-- 聊天列表 -->
		<scroll-view scroll-y class="chat-list">
			<view v-for="(item, index) in chatList" :key="index" class="chat-item" @click="enterChat(item)"
				:style="index === chatList.length - 1 ? 'margin-bottom: 20rpx;' : ''">
				<!-- 左侧头像 -->
				<view class="avatar-box">
					<image :src="_imgUrl + (roles == 'nonghu'?item.otherPhoto :item.nhPhoto)" class="avatar" />
					<view v-if="item.online" class="online-dot"></view>
				</view>

				<!-- 中间内容 -->
				<view class="content">
					<view class="header">
						<text class="username">{{ roles == 'nonghu'?item.otherName: item.nhName}}</text>
						<text class="time">{{ item.time }}</text>
					</view>
					<view class="message">
						<text class="preview">{{ item.lastMessage }}</text>
						<view v-if="item.unread" class="badge">{{ item.unread }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatList: [
					// {
					// 	avatar: "/static/avatars/1.jpg",
					// 	username: "技术支援部",
					// 	time: "10:30",
					// 	lastMessage: "您的问题已收到，我们将尽快处理...",
					// 	unread: 2,
					// 	online: true,
					// },
					// {
					// 	avatar: "/static/avatars/2.jpg",
					// 	username: "产品经理",
					// 	time: "昨天",
					// 	lastMessage: "新版本原型已上传至共享文档",
					// 	unread: 0,
					// 	online: false,
					// },
				],
				_imgUrl: "",
				roles: "",
			};
		},
		onLoad() {
			this.roles = uni.getStorageSync("roles");
			this.getchatList();
		},
		onShow() {
			const curPages = getCurrentPages()[0]; // 获取当前页面实例
			if (typeof curPages.getTabBar === "function" && curPages.getTabBar()) {
			  curPages.getTabBar().setData({
			    selected: 1,
			  });
			}
			this.roles = uni.getStorageSync("roles");
			// this._imgUrl = uni.getStorageSync("userInfo").avatar;	
			this._imgUrl = this.$base.url
			this.getchatList()
		},
		methods: {
			async getchatList() {
				let params = {};
				this.roles = uni.getStorageSync("roles");
				console.log('123',this.roles, uni.getStorageSync("roles"));
				if (this.roles == "nonghu") {
					params = {
						nhId: uni.getStorageSync("userInfo").userId,
					};
				} else {
					params = {
						otherId: uni.getStorageSync("userInfo").userId,
					};
				}
				try {
					let res = await this.$api.list("chat", params);
					if (res.code == 200) {
						this.chatList = res.rows
					}
				} catch (error) {}

			},
			enterChat(item) {
				uni.navigateTo({
					url: "/pages/chat/chat?id=" + item.id,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.chat-container {
		background: linear-gradient(15deg, #f8f9ff 0%, #f1f3fe 100%);
		min-height: 100vh;
	}

	.search-bar {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background: rgba(255, 255, 255, 0.9);
		margin: 20rpx;
		border-radius: 50rpx;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.1);

		.search-input {
			flex: 1;
			font-size: 28rpx;
			margin-left: 16rpx;
		}
	}

	.chat-list {
		height: calc(100vh - 120rpx);
		padding: 0 20rpx;
	}

	.chat-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		margin: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.08);
		transition: all 0.3s ease;

		&:active {
			transform: translateY(4rpx);
			box-shadow: 0 2rpx 6rpx rgba(102, 126, 234, 0.1);
		}
	}

	.avatar-box {
		position: relative;
		margin-right: 24rpx;

		.avatar {
			width: 96rpx;
			height: 96rpx;
			border-radius: 16rpx;
			background: #eee;
		}

		.online-dot {
			position: absolute;
			right: -6rpx;
			bottom: -6rpx;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background: #4cd964;
			border: 2rpx solid #fff;
		}
	}

	.content {
		flex: 1;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12rpx;

			.username {
				font-size: 32rpx;
				font-weight: 600;
				color: #2d3748;
			}

			.time {
				font-size: 24rpx;
				color: #718096;
			}
		}

		.message {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.preview {
				flex: 1;
				font-size: 28rpx;
				color: #718096;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.badge {
				min-width: 36rpx;
				height: 36rpx;
				padding: 0 8rpx;
				background: #ff4757;
				color: #fff;
				font-size: 22rpx;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>